<template>
  <div class="vc-text-xl vc-font-semibold vc-py-2">label字体</div>
  <FontProps v-model:value="labelCssProps" :enable-empty-style="true" />
  <div class="vc-text-xl vc-font-semibold vc-py-2">value字体</div>
  <FontProps v-model:value="valueCssProps" :enable-empty-style="true" />
</template>
<script setup lang="ts">
import { CSSProperties, ref, watch } from "vue";
import { LabelValueOriginalProps, SetPropsExpose } from "./types";
import { ConfigurationInstance, LabelValueJSON } from "/@/components/types";
import FontProps from "../AttrPanel/FontProps.vue";

const props = defineProps<{
  compInstance: ConfigurationInstance<LabelValueJSON, LabelValueOriginalProps>;
}>();

const originalProps = props.compInstance.getOriginalProps();
const labelCssProps = ref<CSSProperties>(originalProps.labelCssProps);
const valueCssProps = ref<CSSProperties>(originalProps.valueCssProps);
watch(
  [labelCssProps, valueCssProps],
  ([v1, v2]) => {
    if (props.compInstance && props.compInstance.previewCondition) {
      props.compInstance.previewCondition({
        labelCssProps: v1,
        valueCssProps: v2,
      });
    }
  },
  {
    deep: true,
  }
);

const myExpose: SetPropsExpose = {
  clear() {},
  setCondition(condition) {
    labelCssProps.value = condition.labelCssProps ? { ...condition.labelCssProps } : {};
    valueCssProps.value = condition.valueCssProps ? { ...condition.valueCssProps } : {};
  },
  getSetResult() {
    return {
      labelCssProps: { ...labelCssProps.value },
      valueCssProps: { ...valueCssProps.value },
    };
  },
};
defineExpose(myExpose);
</script>
